<template>
    <section>
        <div class="rule-content">
            <div class="tips-procedure">
                <div class="procedure-item">
                    <span class="order">1</span>选择课程</div>
                <div class="procedure-item">
                    <span class="order">2</span>勾选班级</div>
                <div class="procedure-item">
                    <span class="order">3</span>合班</div>
            </div>
            <div class="choose-course">
                <span>选择课程：</span>
                <el-select v-model="course" @change="changeCours" class="course-type" placeholder="请选择" size="small">
                    <el-option v-for="item in courseOption" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="choose-class">
                <div class="title">勾选班级：</div>
                <ul class="choose-class-list">
                    <li>
                        <el-checkbox-group v-model="classChecked">
                            <el-checkbox v-for="(item , index) in classList" :key="item.id" :disabled="item.isMerge == 1" :label="item.id">{{item.name}}</el-checkbox>
                        </el-checkbox-group>
                    </li>
                </ul>
                <p v-show="!classList || !classList.length">{{courseName}}课程没有教学班，排课中无{{courseName}}班，请核实{{courseName}}是否属于教学班课程，如果不是请在基础信息中更改课程类型</p>
                <button type="button" class="mixed-class-btn" v-show="classList && classList.length" @click="mergeClass">合班</button>
                <div class="mixed-class-tips">
                    合班结果：
                    <el-table :data="tableData" class="class-mixed-table" v-loading.body="tableLoading">
                        <el-table-column prop="classNames" label="合班结果">
                             <template scope="scope">
                               {{scope.row.courseName}} : {{scope.row.classNames}}
                            </template>
                        </el-table-column>
                        <el-table-column>
                            <template scope="scope">
                                <el-button @click.native.prevent="deleteRow(scope.row)" type="text" size="small" class="del-class">
                                    删除合班
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
import utils from '../../../assets/js/urlConfig.js';
export default {
    data() {
        return {
            course: '',
            courseName: '',
            courseOption: [],
            classList: [],
            classChecked: [],
            tableData: [],
            classIds: '',
            classType: '',
            tableLoading: true,
            taskId: sessionStorage.getItem('taskId') || '91',
        }
    },
    mounted() {
        this.getCourseOption();
        this.getTableData();
    },
    methods: {
        // 获取课程信息
        getCourseOption() {
            this.$http.get(`${utils.UrlConfig.GetQueryCourse}&taskId=${this.taskId}`)
                .then(res => {
                    this.$set(this.$data, 'courseOption', res.data.bizData);
                    this.course = res.data.bizData[0].id;
                    this.courseName = res.data.bizData[0].name;
                    this.getClassList();
                }).catch(error => {
                    this.$message.error(error);
                })
        },
        // 获取合班结果
        getTableData() {
            this.$http.get(`${utils.UrlConfig.GetMergeInfo}&taskId=${this.taskId}`)
                .then(res => {
                    this.tableLoading = false;
                    this.$set(this.$data, 'tableData', res.data.bizData);
                }).catch(error => {
                    this.$message.error(error);
                })
        },
        // 切换课程
        changeCours(value) {
            this.courseOption.forEach(function(element) {
                if (element.id == value) {
                    this.courseName = element.name
                }
                return;
            }, this);
            this.getClassList();
        },
        // 合班
        mergeClass() {
            if(this.classChecked.length < 2) {
                this.$message.error('请至少选择两个班级进行合班');
                return;
            }
            this.classChecked.forEach(function(element) {
                this.classIds += element + ','
            }, this);
            this.classIds = this.classIds.slice(0, this.classIds.length - 1);
            const param = {
                "taskId": this.taskId,
                'courseId': this.course,
                'classIds': this.classIds,
                'classType': this.classType,
            }

            this.$http.post(utils.UrlConfig.AddMergeInfo, this.changeParams(param))
                .then(res => {
                    this.$set(this.$data, 'classChecked', []);
                    this.classIds = '';
                    this.getClassList();
                    this.tableLoading = true;
                    this.getTableData();
                }).catch(error => {
                    this.$message.error(error);
                })
        },
        // 获取勾选班级
        getClassList() {
            this.$http.post(`${utils.UrlConfig.GetClassDtoByCourse}&taskId=${this.taskId}&courseId=${this.course}&courseName=${this.courseName}`)
                .then(res => {
                    this.$set(this.$data, 'classList', res.data.bizData);
                    this.$set(this.$data, 'classChecked', []);
                    this.classType = res.data.bizData && res.data.bizData[0] && res.data.bizData[0].classType || '';
                }).catch(error => {
                    this.$message.error(error);
                })

        },
        // 删除合班
        deleteRow(row) {
            this.$http.post(utils.UrlConfig.DeleteMergeInfo, `id=${row.id}`)
                .then(res => {
                    this.getClassList();
                    this.tableLoading = true;
                    this.getTableData();
                }).catch(error => {
                    this.$message.error(error);
                })

        },
        changeParams(obj) {
            var str = '';
            for (var value in obj) {
                str = str + `${value}=${obj[value]}&`
            }
            return str.slice(0, str.length - 1);
        },
    }
}
</script>

<style scoped>
    .del-class{
        color: #36c6d3;
    }
</style>
